h1 {
  color: blue;
}

h2.unused {
  color: red;
}

p {
  color: purple;
}

p.unused {
  color: orange;
}

header {
  padding: 0 50px;
}

.banner {
  font-family: sans-serif;
}

.contents {
  padding: 50px;
  text-align: center;
}

.input-field {
  padding: 10px;
}

footer {
  margin-top: 10px;
}

/* critters:exclude */
.container {
  border: 1px solid;
}

/* critters:include */
.custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

/*! critters:include */
.other-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

.custom-element::part(tab):hover {
  background-color: #0c0d19;
  color: #ffffff;
  border-color: #0c0d33;
}

/* critters:include start */
.custom-element::part(tab):hover:active {
  background-color: #0c0d33;
  color: #ffffff;
}

.custom-element::part(tab):focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}
/* critters:include end */

.custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}

div:is(:hover, .active) {
  color: #000;
}

div:is(.selected, :hover) {
  color: #fff;
}
